

<template>
  <div class="search">
      <MyHead title="搜索面试题"   ></MyHead>
      <div class="bar">
        <van-sticky>
          <van-search
            v-model="keyword"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            @cancel="onCancel"
          />
          </van-sticky>
      </div>
      <div class="hlist" v-if="flag">
        <van-cell-group inset title="搜索历史">
          <van-cell @click="todoSearch(item.title)" v-for="(item,index) in searchHistory.slice(0,10)" :title="'No.'+(index+1)" icon="label-o" :value="item.title" :key="index"  is-link  />
        </van-cell-group>

      </div>
      <div class="slist" v-else>
        <MList :list="list" ></MList>
      </div>
  </div>
</template>

<script>
import { todogetallinters } from '@/api/api'
export default {
  data(){
    return {
      keyword:'',
      list:[],
      flag:true,
      searchHistory:[]
    }
  },
  methods:{
    async todoSearch(keyword){
      let res = await todogetallinters({
        keyword,
      })
      if(res.code==200){
        this.flag = false;
        this.list = res.result;
        this.keyword = keyword;
      }
    },
    async onSearch(keyword){  // 开始搜索
      console.log(keyword)
      let res = await todogetallinters({
        keyword,
      })
      if(res.code==200){
        this.flag = false;
        this.list = res.result;
        this.searchHistory.unshift({title:keyword})
        localStorage.setItem('searchHistory',JSON.stringify(this.searchHistory))
      }
    },
    onCancel(){  // 取消搜索
      this.flag = true;
      this.keyword = '';
    }
  },
  mounted(){
      this.searchHistory = JSON.parse(localStorage.getItem('searchHistory')) || [];
  }
}
</script>
